<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<mycom1></mycom1>
			<hr >
			<mycom1></mycom1>
			<hr >
			<mycom1></mycom1>
		</div>
		
		<template id="temp1">
			<div>
				<input type="button" value="+1" @click="increment"/>
				<h3>{{count}}</h3>
			</div>
		</template>
		<script type="text/javascript">
			Vue.component('mycom1',{
				//组件中的数据使用方式和实例中data完全一样
				template:'#temp1',
				//组件中data需要定义为一个方法，方法内部必须返回一个对象
				//保证没一个实例中间data都是独有的
				data:function(){
					return {
						count:0
					}
				},
				methods:{
					increment(){
						this.count +=1
					}
				}
			})
			var vm = new Vue({
				el:'#app',
				//实例中data可以为一个对象
				data:{},
				methods:{}
			})
		</script>
	</body>
</html>
